<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>奖牌首页</title>
		<style type="text/css">
			body{
				width: 366px;
				/* height: 634px; */
			}
			#d1{
				width: 366px;
				height: 634px;
				border: solid 1px darkgray;
				border-radius: 10px;
			}
			#d2{
				width: 366px;
				height: 150px;
			}
			#d2 img{
				width: 366px;
				height: 150px;
			}
			#d2 h2{
				position: relative;
				top: -140px;
				left: -50px;
				color: white;
			}
			#d2 h5{
				position: relative;
				top: -150px;
				left: -70px;
				color: white;
			}
			#d3{
				margin-top: -10px;
				width: 340px;
				height: 110px;
				background-color: aquamarine;
				border-radius: 9px;
			}
			#d3 span>img{
				margin-top: -15px;
				margin-left: 30px;	
			}
			#d3 span font{
				position: relative;
				left: 10px;
				top: -10px;
			}
			#d4{
				margin-top: 10px;
				width: 340px;
				height: 350px;
				background-color: aquamarine;
				border-radius: 9px;
			}
			/* #d4 ul li{
				list-style: none;
				margin-left: -250px;
				margin-top: 20px;
			}
			#d4 ul li img{
				width: 30px;
				height: 20px;
				position: relative;
				top: 5px;
				left: 5px;
			} */
			#d4 table tr{
				margin-top: 10px;
			}
			#d4 table tr td a{
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<center>
		<div id="d1">
			
			<div id="d2">
				<img src="https://search-operate.cdn.bcebos.com/f94480f1dd0c5d625da8d12b77c481df.jpeg" >
				<h2>北京2022年冬奥会</h2>
				<h5>2022.02.04-2022.02.20</h5>
			</div>
			
			<div id="d3">
				<h2>中国第<span style="color: red;">3</span>名</h2>
				<h5 style="margin-top: -17px;">2022年冬奥会奖牌榜</h5>
				<div style="margin-left: -40px;">
					<span><img src="https://search-operate.cdn.bcebos.com/87f7f3765960ea9ff14780cf3d3aed37.png" style="width: 45px;height: 45px;"><font size="5" color="darkgoldenrod">9</font></span>
					<span><img src="https://search-operate.cdn.bcebos.com/5f5b01f7473cf1f9058918f13bbe75cb.png" style="width: 45px;height: 45px;"><font size="5" color="darkgoldenrod">9</font></span> 
					<span><img src="https://search-operate.cdn.bcebos.com/b9600bc4ebb1cbe5bd35a97af3cfc777.png" style="width: 45px;height: 45px;"><font size="5" color="darkgoldenrod">9</font></span>
				</div>
				
			</div>
			
			<div id="d4">
				<!-- <span style="font-size: 20px; color: white;position: relative;left: -50px;">排名</span>
				<span style="font-size: 20px; color: white;position: relative;left: 50px;">金牌 银牌 铜牌 总计</span> -->
				<!-- <ul>
					<li style="color: red;">①<img src="https://search-operate.cdn.bcebos.com/f6486586ef8546849471effd1f905ae4.png"></li>
					<li style="color: coral;">②</li>
					<li style="color: orange">③</li>
					<li>④</li>
					<li>⑤</li>
				</ul> -->
				<table cellspacing="15">
					<tr>
						<td width="150px">排名</td>
						<td width="40px">金牌</td>
						<td width="40px">银牌</td>
						<td width="40px">铜牌</td>
						<td width="40px">总计</td>
					</tr>
					<tr>
						<td style="color: red;">① <a href="nation.html">罗威</a></td>
						<td>9</td>
						<td>8</td>
						<td>9</td>
						<td>26</td>
					</tr>
					<tr>
						<td style="color: coral;">② <a href="nation.html">德国</a></td>
						<td>9</td>
						<td>8</td>
						<td>9</td>
						<td>26</td>
					</tr>
					<tr>
						<td style="color: orange;">③ <a href="nation.html">中国</a></td>
						<td>9</td>
						<td>8</td>
						<td>9</td>
						<td>26</td>
					</tr>
					<tr>
						<td>④ <a href="nation.html">美国</a></td>
						<td>9</td>
						<td>8</td>
						<td>9</td>
						<td>26</td>
					</tr>
					<tr>
						<td>⑤ <a href="nation.html">瑞典</a></td>
						<td>9</td>
						<td>8</td>
						<td>9</td>
						<td>26</td>
					</tr>
				</table>
			</div>
		</div>
		</center>
	</body>
</html>
